<template>
  <footer class="footer">
    <!-- This should be `0 items left` by default -->
    <span class="todo-count">剩余<strong>{{shengyu}}</strong></span>
    <!-- Remove this if you don't implement routing -->
    <ul class="filters">
      <li>
        <a :class="{selected: flag === 1}" @click="$emit('changeFlag',1)" href="#/">全部任务</a>
      </li>
      <li>
        <a :class="{selected: flag === 2}" @click="$emit('changeFlag',2)" href="#/active">进行中</a>
      </li>
      <li>
        <a :class="{selected: flag === 3}" @click="$emit('changeFlag',2)" href="#/completed">已完成</a>
      </li>
    </ul>
    <!-- Hidden if no completed items are left ↓ -->
    <button class="clear-completed" @click="$emit('clearCompleted')">清除已完成</button>
  </footer>
</template>
<script>
export default {
  props: {
    list: Array,
    flag: Number
  },
  computed: {
    shengyu() {
      return this.list.filter(item=>item.isDone===false).length
    },
  },
};
</script>
<style lang="">
</style>